<template>
  <section class="dialog-box">
    <el-dialog
      ref="elDialog"
      v-el-drag-dialog
      :title="title"
      :visible="visible"
      :width="width"
      :center="center"
      :show-close="showClose"
      append-to-body
      :close-on-click-modal="false"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <section class="dialog-content">
        <slot />
      </section>
      <template v-slot:footer>
        <footer :style="{textAlign: footerAlign}">
          <slot name="footer" />
        </footer>
      </template>
    </el-dialog>
  </section>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    visible: { type: Boolean, default: false },
    showClose: { type: Boolean, default: true },
    title: { type: String, default: '标题' },
    width: { type: [Number, String], default: '60%' },
    center: { type: Boolean, default: false },
    // left， cencter， right
    footerLayout: { type: String, default: 'right',
      validator(val) {
        return ['left', 'cencter', 'right'].indexOf(val) !== -1
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    footerAlign() {
      return this.center ? 'center' : this.footerLayout
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '~@/styles/variables.scss';
::v-deep .el-dialog {
  .el-dialog__header {
    height: 50px;
    padding: 14px 10px;
    background-color: $menuActiveText;
    cursor: default;
    .el-dialog__title, .el-dialog__close.el-icon-close {
      color: $white;
    }
    .el-dialog__close.el-icon-close {
      line-height: 1.2;
      cursor: pointer;
    }
  }
  .el-dialog__body {
    height: calc(85vh - 200px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .el-dialog__footer {
    background-color: $bg;
    padding: 10px 20px;
  }
}
</style>
